<!--  -->
<template>
  <div class="group-data-page">
    <c-title :hide="false" text="群数据"></c-title>
    <van-search
      v-model="keyword"
      shape="round"
      placeholder="搜索群名称"
      @input="searchChange"
    />
    <div class="group-data" v-if="groupList.length > 0">
      <block v-for="(item,index) in groupList" :key="index">
        <div class="group-item">
          <h3 class="ell">{{item.group_name}}</h3>
          <div class="group-watch flex">
            <div class="watch">
              <h4>观看次数</h4>
              <p>{{item.watch_count}}</p>
            </div>
            <div class="watch" v-if="item.member_count || item.member_count == '0'">
              <h4>观看人数</h4>
              <p>{{item.member_count}}</p>
            </div>
            <div class="watch" v-if="item.live_member_count || item.live_member_count == '0'">
              <h4>直播观看人数</h4>
              <p>{{item.live_member_count}}</p>
            </div>
            <div class="watch" v-if="item.live_finish_ratio">
              <h4>直播完播率</h4>
              <p>{{item.live_finish_ratio}}</p>
            </div>
            <div class="watch" v-if="item.finish_ratio">
              <h4>完播率</h4>
              <p>{{item.finish_ratio}}</p>
            </div>
            <div class="watch" v-if="item.back_member_count || item.back_member_count == '0'">
              <h4>回放观看人数</h4>
              <p>{{item.back_member_count}}</p>
            </div>
            <div class="watch" v-if="item.back_finish_ratio">
              <h4>回放完播率</h4>
              <p>{{item.back_finish_ratio}}</p>
            </div>
            <div class="watch" @click="userTo(item.id)">
              <h4>
                在线观看用户
              </h4>
              <div  class="flex-a-c">
                <span class="look">查看</span>
                <span class="iconfont icon-advertise-next"></span>
              </div>
            </div>
          </div>
        </div>
      </block>
    </div>
    <van-empty description="暂无数据" v-else/>
  </div>
</template>

<script>
import groupData_controller from "./groupData_controller.js";
export default groupData_controller;
</script>
<style lang="scss" scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数*/
  overflow: hidden;
}
/* @import url(); 引入公共css类 */
  .group-data {
    margin:10px 12px 0px 12px;
    padding:0 0 20px 0;
    .group-item {
      padding:0.75rem 0.75rem 0 0.75rem;
      background-color: #fff;
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      margin:0 0 0.625rem 0;
      h3 {
        font-weight: bold;
        color: #00001C;
        font-size: 1rem;
        line-height: 1rem;
        padding:0 0 0.75rem 0;
        border-bottom: 0.0625rem solid #F0F0F1;
        text-align: left;
      }
      .group-watch {
        padding:1rem 0 0.8125rem 0;
        flex-wrap: wrap;
        .watch {
          // padding: 0 4.1875rem 0 0;
          flex:0 0 33%;
          margin: 0 0 1.3125rem 0;
          &:nth-child(1n +3){
            margin: 0;
          }
          h4 {
            font-size: 0.75rem;
            line-height: 0.75rem;
            color: #6E6E79;
            padding-bottom: 0.3125rem;
            text-align: left;
          }
          .look {
            font-size: 0.75rem;
            line-height: 0.75rem;
            color: var(--themeBaseColor);
            padding: 0 0 0 0.125rem;
          }
          .icon-advertise-next {
            color: var(--themeBaseColor);
          }
          p {
            text-align: left;
            color: #00001C;
            line-height: 1.25rem;
            // font-weight: 500;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>